        // 1, 页面滚动监听事件
        $(window).scroll(function(){
            // 页面上卷高度
            // console.log( $('html').scrollTop() );

            // 上卷高度 判断 给 侧边栏li 和 吸顶div 显示隐藏
            if( $('html').scrollTop() > 500 ){
                // 使用 动画效果实现 侧边栏div渐现
                $('.storeyNav').fadeIn();
            
            }else{
                $('.topDiv').slideUp();
                $('.storeyNav').fadeOut();
            }

            // 给 显示的楼层导航li 对应的 侧边栏li添加 css样式
            // 循环遍历 给所有的楼层导航li 添加 事件
            $('body>div').each( (key , item) => {
                //  给 item 也就是 楼层导航li 添加事件
                //  判断 上卷高度 + 预留高度 > 当前楼层导航li距离页面顶部距离
                if( $('html').scrollTop() + 200 > $(item).offset().top  ){
                    // 给所有的 侧边栏li 清除css样式 给 索引下标相同的侧边栏li添加css样式
                    $('.storeyNav ul li').removeClass('active').eq( key+1 ).addClass('active');
                }
            })
        })

        // 2, 给所有的侧边栏li添加点击事件
        $('.storeyNav ul li').click(function(e){
            // 点击标签 name是 back 证明点击的是返回顶部标签
            if( e.target.getAttribute('name') === 'back' ){
                // 通过动画实现 scrollTop 为 0
                $('html').animate( {scrollTop : 0} , 1000 , 'linear' );
            
            // 点击标签 name是 li 证明点击的是 侧边栏li标签        
            }else if( e.target.getAttribute('name') === 'li' ){
                // 通过动画实现 scrollTop 为 点击的侧边栏li 索引下标相同的 楼层导航li距离页面顶部的间距 - 预留距离
                $('html').animate( {scrollTop : $('body>div').eq( $(e.target).index() ).offset().top - 200} , 1000 , 'linear' );
            }
        })
